<template>
<div class="line-chart" :ref="chartname"></div>
</template>

<script>
export default {
  props: {
    statusItem: {
      type: Object,
    },
    chartname: {
      type: String,
    }
  },
  data() {
    return {
      xAxisData:[],
      yAxisData:[],
    };
  },
  mounted(){
    this.initChart()
  },
  methods:{
     /**初始化图表 */
     initChart() {
      console.log(this.$refs[this.chartname]);
      const  lineChart = this.$echarts.init(this.$refs[this.chartname]);
        // 配置图表的选项

      const option = {
        // title: {
        //   text: '时间轴折线图'
        // },
        backgroundColor: '#ebf1f1',
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'time',
          boundaryGap: false,
          data: this.statusItem.heartBeatChart?.times || []  ,  // 使用分开的 X 轴数据
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '示例数据',
          type: 'line',
          data: this.statusItem.heartBeatChart?.values || []     // 结合 X 轴和 Y 轴的数据
        }]
      };
      lineChart.setOption(option);

    },
  }
};
</script>


